<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结算页面</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/font-awesome.css"/>
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">
    <script src="js/vue.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/notifications/Lobibox.js"></script>
<!--    <script src="js/jquery.cookie.min.js"></script>-->



        <script src="js/loginStatus.js"></script>
    <style>
        .navbar-text a {
            color: #ffffff;
        }

        .login-text {
            margin-right: 50px;
        }

        h4.title {
            font-weight: 800;
        }

        .mgl30 {
            margin-left: 30px;
        }

        #allAddressTable a {
            display: none;
        }

        /** 当鼠标划到 tr上的时候，让它下面的 a标签展示 */
        #allAddressTable tr:hover a {
            display: inline-block;
        }

    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="index.html" class="navbar-brand" style="color: #ffffff;"><i class="fa fa-sign-language"></i>
                寻欢易购</a>
        </div>
        <p class="navbar-text navbar-right">
            <a onclick="gotoOrder()" href="#">我的订单</a>
        </p>
        <p class="navbar-text navbar-right login-text">
            <a id="loginName" href="#"></a>
        </p>
        <p class="navbar-text navbar-right login-text">
            <a id="outLogin" href="/" onclick="outLogin()" >登出</a>
        </p>
    </div>
</nav>
<div class="container-fluid" id="app">
    <div class="row">
        <div class="col-xs-8 col-xs-push-2">
            <h4 class="title">收货人信息</h4>
            <p id="pp" class="alert alert-danger">

                <input type="hidden" id="takeDeliveryAddressId" v-model="defaultAddressId">
                <span style="font-weight: 800;">{{defaultName}}</span>
                <span class="mgl30">{{defaultDetail}}</span>
                <span class="mgl30">{{defaultPhone}}</span>


            </p>

            <a data-toggle="collapse" href="#moreAddress">更多地址</a>

            <a onclick="insertAddress()" href="javascript: void(0);">新增收货地址</a>

            <div class="collapse" id="moreAddress" style="margin-top: 15px;">
                <table id="allAddressTable" class="table">
                    <tr v-for="addr in allAddress">
                        <td>
                            {{addr.aname}}<span class="label label-success" v-if="addr.astate == 1">默认</span>
                        </td>
                        <td>{{addr.adetail}}</td>
                        <td>{{addr.aphone}}</td>
                        <td style="width: 130px;">
                            <a href="javascript: void(0);" :aid="addr.aid" onclick="setTakeDeliveryAddress(this)">设为收货地址</a>
                        </td>
                        <td style="width: 130px;">
                            <a href="javascript: void(0);" :aid="addr.aid" onclick="setDefaultAddress(this)">设为默认地址</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-8 col-xs-push-2">
            <h4 class="title">送货清单</h4>
            <table class="table">
                <thead>
                <tr>
                    <td>商品</td>
                    <td>单价</td>
                    <td>数量</td>
                </tr>
                </thead>
                <tbody id="goodsTbody">
                <tr v-for="g in allCartItem">
                    <td style="max-width: 200px;">
                        <div class="media">
                            <div class="media-left">
                                <a href="javascript: void(0);">
                                    <img class="media-object" height="80px" width="62px"
                                         :src="'http://10.3.140.185/'+g.smallPic">
                                </a>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">{{g.title}}</h4>
                            </div>
                        </div>
                    </td>
                    <td>{{g.price}}</td>
                    <td class="goodsNum">{{g.num}}</td>
                    <td>{{g.check}}</td>
                    <td hidden="hidden" class="goodsId">{{g.goodsId}}</td>
                </tr>
                </tbody>
                <tfoot>
                <tr style="text-align: right;">
                    <td colspan="5" >
                        总计：￥<span id="totalPrice1">{{totalPrice}}</span>
                        <button onclick="ensureOrder()" class="btn btn-danger">确认订单</button>

                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
<div class="modal" id="payModal" data-backdrop="static">
    <div class="modal-dialog" style="margin-top: 120px;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
                <h3 class="modal-title">支付信息</h3>
            </div>
            <div class="modal-body">
                <input type="hidden" id="orderNo">
                <h4 style="font-weight: 800;"><span>应付金额: </span>￥<span style="color: red;" id="totalPrice"></span>
                </h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" onclick="cancelPay()">取消支付</button>
                <button type="button" onclick="confirmPay()" class="btn btn-success">确认支付</button>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="insertModal" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
              <!--            模态框内容   -->
            <div class="modal-header">
                <button class="close" data-dismiss="modal">x</button>
               <h3 class="modal-title">新增收货人信息</h3>
            </div>
            <div class="modal-body">
    <form action="/front/insertAddress" method="post" class="form-group">

            <div class="form-group">
                <label>*收货人</label>
                <input name="aName" class="form-control"  placeholder="请输入姓名"/><br/>
            </div>

            <div class="form-group">
                <label>*收货地址：</label>
               <input name="aDetail"  class="form-control" placeholder="请输入地址"/><br/>
            </div>
            <div class="form-group">
                <label>*手机号码：</label>
                <input name="aPhone"  class="form-control" placeholder="请输入手机号码"/><br/>
            </div>

        <div class="modal-footer">

            <button class="btn btn-success">保存收货人信息</button>
        </div>


    </form>

 </div>
  </div>
</div>
</div>

</body>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            defaultAddressId: 0,
            defaultDetail: '',  //默认详情
            defaultName: '',    //默认名字
            defaultPhone: '',    //默认手机
            allAddress: [],     //其他的地址信息
            allCartItem: [],
            totalPrice: 0
        },

    });



    $(function () {
        getAddress();
        getGoodsInfo();
    });


    //获取用户地址
    function getAddress() {
        $.ajax({
            url: 'front/queryAddressById',
            type: 'get',
            data: {},
            dataType: 'json',
            success: function (_data) {
                vm.allAddress = [];

                for (var i = 0; i < _data.length; i++) {
                    var addr = _data[i]; //取到每个地址

                    vm.allAddress.push(addr);


                    if (addr.atakeDeliveryState == 1) {  //收货地址
                        vm.defaultAddressId = addr.aid;//设置默认地址的id
                        vm.defaultDetail = addr.adetail;
                        vm.defaultName = addr.aname;
                        vm.defaultPhone = addr.aphone;
                    }
                }
            }
        })
    }

    //获取购物车商品信息
    function getGoodsInfo() {
        //转换为json数据 {'1001' : 1 '1002' : 2}
        //var localShoppingCart = JSON.parse(localStorage.getItem("cartItem"));
        //var localShopping = {'1007' : 1 };
        //var goodIds = Object.keys(localShoppingCart);//取所有商品的ID,返回值是数组 ['1001','1002']
        // alert(console.log(localShoppingCart));
        //join将指定的字符拼接成字符串
        //var goodIdsStr = goodIds.join(",");//['1001','1002']  --> 1001,1002
        $.ajax({
            url: 'front/selectCartItemByUid',
            type: 'get',
            dataType: 'json',
            success: function (_data) {
                //alert(_data);
                var totalPrice = 0;
                for (var i = 0; i < _data.length; i++) {
                    var goods = _data[i]; //获取每个商品
                    // var goodId = Item.goodsId; //获取商品的ID，获取商品的数量
                    // var price = Item.price;
                    //var title = goods.title;
                    //alert(title);

                    totalPrice += (goods.num * goods.price);//计算商品的总价格
                    //alert(totalPrice);
                    vm.allCartItem.push(goods);
                }
                vm.totalPrice = totalPrice;
                //console.log(totalPrice);
            }

        })
    }

    //设置收货地址
    function setTakeDeliveryAddress(aTag) {
        var currentAddressId = $(aTag).attr('aid'); //获取地址的id

        $.ajax({
            url: 'front/changeTakeDeliveryAddress',
            data: {aId: currentAddressId},
            datatype: 'json',
            type: 'get',
            success: function (_data) {
                // if(_data.code > 0){ //更新地址成功

                getAddress();   //重新获取地址
                // } else {
                //     alert(console.log(_data));
                // }
            }
        })
    }

    //设置默认地址
    function setDefaultAddress(aTag) {
        var currentAddressId = $(aTag).attr('aid'); //获取地址的id
        $.ajax({
            url: 'front/changeDefaultAddress',
            data: {aId: currentAddressId},
            datatype: 'json',
            type: 'get',
            success: function (data) {
                // if(_data.code > 0){ //更新地址成功

                // alert(data);
                getAddress();   //重新获取地址
                // } else {
                //     alert(console.log(_data));
                // }
            }
        })
    }



    function insertAddress() {
        $('#insertModal').modal('show');

    }

    function settlement() {
        //获取购物车内容
        var arr = [];
        var fi = $('#goodsTbody').find('.goodsId');
        var fn = $('#goodsTbody').find('.goodsNum');

        for (var i = 0; i < fi.length; i++) {
            var obj= {
                goodsId:fi.eq(i).text(),
                num:fn.eq(i).text()
            }
            arr.push(obj);
        }//console.log(arr)

        for (var i = 0; i < arr.length; i++) {
            //console.log(arr[i].goodsId)
            //console.log(arr[i].num)
        }

        var stringify = JSON.stringify(arr);

        //发送到后台服务处理数据
        $.ajax({
            url: '/settlement',
            type: 'GET',
            traditional: true,
            data: {"arr": stringify},
            dataType: 'text',
            success: function (data) {
                //alert(data);
                $('#orderNo').val(data);


            }
        })
    }

    function ensureOrder() {

        settlement();
        //var orderNo = $('#orderNo').val();
        var totalPrice1 = $('#totalPrice1').text();
        $('#totalPrice').text(totalPrice1);
        //alert(orderNo+totalPrice1);


        $('#payModal').modal('show');

    }

    function confirmPay() {
        var orderNo = $('#orderNo').val();
        var totalPrice1 = $('#totalPrice1').text();
        $('#totalPrice').text(totalPrice1);
        window.location.href="front/aliPay?oNo="+orderNo+"&totalPrice="+totalPrice1;
    }

    function cancelPay() {
        window.location.href="showOrder";
    }
    $(function () {

        /**
         * 获取后端session数据
         * uName：用户名
         * uId：用户ID
         */
        $.ajax({
            url: 'getLoginInfo',
            type: 'GET',
            dataType: 'JSON',
            success: function (data) {
                console.log(data)
                uName = data['uName'];
                uId = data['uId'];

                $('#loginName').text("欢迎您:"+uName)

            }
        })
    })

    /*登出：注销*/
    function outLogin() {
        $.ajax({
            url: '/front/outLogin',
            type: 'GET',
            dataType: 'TEXT',
            success: function (data) {

            }
        })
    }
//    跳转到我的订单
    function gotoOrder() {

            window.location.href="showOrder"
    }

</script>
</html>